<!-- Dom模板 -->
<template>
  <div class="box">
    <div class="content">
      <div class="hhh">
        <img src="@/components/imgs/12.jpg" alt="" />
      </div>
      <div class="content_input">
        <div class="title">
          <p>人人惠购后台管理系统</p>
          <p>MANAGEMENT SYSTEM</p>
        </div>
        <el-input
          v-model="phone"
          clearable
          placeholder="用户名"
          type="number"
        ></el-input>
        <el-input
          v-model="password"
          clearable
          show-password
          placeholder="密码"
        ></el-input>
        <div class="logins">
          <p><input type="checkbox" /> 记住密码</p>
          <!-- <div class="content_button" @click="login"></div> -->
          <el-button :plain="true" @click="logins">
            登录
          </el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- v-loading.fullscreen.lock="fullscreenLoading" -->
</template>
<script>
// import a from './a'; // 引入组件
import * as api from "../../api/login";
import Storage from "../../components/encapsulation/Storage";
import webSocket from "../../utils/webSocket";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      phone: "",
      password: ""
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let tha = this;
    // 获取键盘码事件
    window.onkeydown = function(e) {
      // 回车
      if (e.keyCode == 13) {
        console.log("回车键");
        tha.logins();
      }
    };
  },
  // Vue方法定义
  methods: {
    logins() {
      var reg = new RegExp("[1][3,4,5,7,8][0-9]{9}$");
      if (this.phone != "" && this.password != "") {
        if (reg.test(this.phone)) {
          console.log({ phone: this.phone, password: this.password });
          api
            .login({
              phone: this.phone,
              password: this.password,
              // type：01 代表点击的是登录
              type: "01"
            })
            .then(res => {
              console.log(res);
              if (res.code == "01") {
                // 登陆成功
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                Storage.set("token", res.data);
                this.$router.push({ path: "/first" });
                // 点击登录的时候保存当前账号
                webSocket.send(
                  JSON.stringify({
                    // type值如果为login 表示需要等路由就保存当前账户
                    type: "login",
                    // 管理员的名字
                    uid: res.data.uid,
                    phone: res.data.phone,
                    img: res.data.img
                      ? res.data.img
                      : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png"
                  })
                );
              } else {
                // 密码错误
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            });
        } else {
          this.$message({
            message: "账号不符合规则",
            type: "warning"
          });
        }
      } else {
        this.$message({
          message: "账号密码不能为空",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.box {
  width: 100%;
  height: 968px;
  background: #d6e9ff;
  /* background: url("../../components/imgs/12.jpg"); */
  background-size: 100% 100%;
}
.el-button {
  width: 80px;
  height: 40px;
  /* box-shadow: 3px 5px 10px -3px #000; */
}
.content {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mymove 1.5s ease-in-out alternate;
  overflow: hidden;
  transition: 1.5s;
}
.content .hhh {
  margin-left: 0;
}
.content .hhh img {
  width: 400px;
  height: 500px;
}

.content_input {
  width: 300px;
  height: 500px;
  position: absolute;

  top: 70%;
  left: 75%;
  transform: translate(-50%, -50%);
  animation: mymove1 1.5s ease-in-out alternate;
}
.logins {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content_button {
  width: 74px;
  height: 44px;
  line-height: 20px;
  padding-top: 5px;
  border-radius: 5px;
  background-color: rgba(58, 98, 215, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;

  font-family: Roboto;
}

.el-input {
  margin-bottom: 25px;
  /* box-shadow: 1px 5px 10px -5px #000; */
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #3a62d7;
}
.title > :nth-child(1) {
  margin: 0 0 10px;
}
.title > :nth-child(2) {
  font-size: 12px;
}

.el-button--primary {
  width: 100%;
}
</style>
